<div *ngIf="afAuth.user | async as user; else showLogin">
<mat-toolbar color="primary">
  <mat-icon [routerLink]="['']">meeting_room</mat-icon>
  <span> &nbsp; </span> 
  <span noWrap=false> Door/window </span>
  <span class="example-spacer"></span>
  <fa name="square" [routerLink]="['addDoor']"></fa>
  <span> &nbsp;&nbsp; </span> <fa name="user" [routerLink]="['addGuard']"></fa>
  <span> &nbsp;&nbsp; </span>
  <fa name="calendar" [routerLink]="['events']"></fa>
  <span> &nbsp;</span>
  <button mat-icon-button (click)="logout()">
      <mat-icon aria-label="Example icon-button with a heart icon">power_settings_new</mat-icon>
  </button>
</mat-toolbar>
<router-outlet></router-outlet>
</div>

<ng-template #showLogin>
  <mat-card class="example-card">
        <mat-card-header>
          <mat-card-title>Login</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <form [formGroup]="loginForm">
            <div class="form-group">
                <mat-form-field class="example-full-width">
                    <input matInput placeholder="email" formControlName="email">
                </mat-form-field>
            </div>
            <div class="form-group">
                <mat-form-field class="example-full-width">
                    <input matInput type="password" placeholder="password" formControlName="password">
                </mat-form-field>
            </div>
          </form>
          <mat-progress-spinner style="margin:0 auto;" *ngIf="isLoading"
            color="primary" 
            mode="indeterminate">
          </mat-progress-spinner>
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button color="primary" (click)="loginWithEmail()" [disabled]="!loginForm.valid">&nbsp;Login</button><br>
        </mat-card-actions>
      </mat-card>
  
</ng-template>